<template>
	<view>
		<uamhead :title="title"></uamhead>
		<view class="list-head">
			<view class="list-head-img">
				<image :src="playlist.coverImgUrl" mode=""></image>
				<text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
			</view>
			<view class="list-head-text">
				<view>{{ playlist.name }}</view>
				<view>{{ playlist.description }}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view v-show="isShow" class="list-music-title"> 
				<text class="iconfont iconbofang1"></text>
				<text>播放全部</text>
				<text>(共{{ playlist.trackCount }}首)</text>
			</view>
			<view class="list-music">
				<view class="list-music-item" v-for="(item,index) in playlist.tracks" :key="item.id"  @tap="navPlayer(item.id)">
					<view class="list-music-top">{{ index + 1 }}</view>
					<view class="list-music-song">
						<view>{{ item.name }}</view>
						<view>
							<image v-if=" privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png" mode=""></image>
							<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>
							{{ item.ar[0].name }} - {{ item.name }}
						</view>
					</view>
					<text class="iconfont iconbofang"></text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {listDetail} from '../../common/api.js'
	export default {
		data() {
			return {
				title:"榜单列表",
				playlist : {
					coverImgUrl : '',
					trackCount : '',
					creator : ''
				},
				privileges : [],
				isShow : false
			}
		},
		onLoad(options){
			let listid=options.listid;
			listDetail(listid).then((res)=>{
				if(res.data.code=='200'){
					this.title=res.data.playlist.name
					this.playlist=res.data.playlist
					this.privileges = res.data.privileges
					this.isShow=true
					}
				}
			)},
		methods: {
			navPlayer(id){
				uni.navigateTo({
					url:'/pages/player/player?songId='+id
				})
			}
		}
	}
</script>

<style>
	.list-head{ display: flex; margin:30rpx;}
	.list-head-img{ width:265rpx; height:265rpx; border-radius: 15rpx; margin-right:40rpx; overflow: hidden; position: relative;}
	.list-head-img image{ width:100%; height:100%;}
	.list-head-img text{ position: absolute; font-size:26rpx; color:white; right:8rpx; top:8rpx;}
	.list-head-text{ flex:1; font-size:24rpx; color:#c3d1e3;}
	.list-head-text image{ width:52rpx; height:52rpx; border-radius: 50%;}
	
	.list-music{ background:white; border-radius: 50rpx; overflow: hidden; margin-top:45rpx;}
	.list-music-item{ display: flex; margin:0 30rpx 70rpx 44rpx; align-items: center;}
	.list-music-top{ width:56rpx; font-size:28rpx; color:#979797;}
	.list-music-song{ flex:1; line-height: 40rpx;}
	
	.scroll-Y {
			height: 700rpx;
		}
		
	.list-music-title{ height:58rpx; line-height: 58rpx; margin:30rpx 30rpx 70rpx 30rpx;}
	
	.list-music-song image{ width:34rpx; height:22rpx; margin-right:10rpx;}
</style>
